<template>
  <view>
    <!-- 骨架屏 -->
    <kz-skeleton
        v-if="showSkeleton"
        :showSkeleton="showSkeleton"
        backgroundColor="#fafafa"
        borderRadius="10rpx"
    ></kz-skeleton>

    <!-- 添加小程序提示组件 -->
    <!-- #ifdef MP-WEIXIN -->
    <add-tip :tip="focusOnTip" :duration="3"/>
    <!-- #endif -->

    <!-- 首页多彩列表风格组件1 -->
    <kz-page-index-color-1
        :title="title"
        :banners="banners"
        :papers="papers"
        :rooms="rooms"
        :news="news"
        :notices="notices"
        :modules="diyIndexButton"
        :subjectId="subjectId"
        :subjectName="subjectName"
        :checkLoginAndProceed="checkLoginAndProceed"
        v-if="pageStyle == 'color'"
    ></kz-page-index-color-1>

    <!-- 首页多彩列表风格组件2 -->
    <kz-page-index-color-2
        :title="title"
        :banners="banners"
        :papers="papers"
        :rooms="rooms"
        :news="news"
        :notices="notices"
        :modules="diyIndexButton"
        :subjectId="subjectId"
        :subjectName="subjectName"
        :checkLoginAndProceed="checkLoginAndProceed"
        v-else-if="pageStyle == 'color2'"
    ></kz-page-index-color-2>



    <!-- 首页简约风格组件 -->
    <kz-page-index-simple-1
        :title="title"
        :notices="notices"
        :subjectId="subjectId"
        :subjectName="subjectName"
        :userInfo="userInfo"
        :diyIndexButton="diyIndexButton"
        :checkLoginAndProceed="checkLoginAndProceed"
        v-else-if="pageStyle == 'simple'"
        @clickUserInfo="clickUserInfo"
    ></kz-page-index-simple-1>
    <!-- <kz-page-index-simple :banners="banners" v-if="pageStyle == 'simple'"></kz-page-index-simple> -->

    <!-- 悬浮组件 -->
    <tui-scroll-top
        :scrollTop="scrollTop"
        :isIndex="false"
        :isHideAd="showAdBtn"
        :isShare="showShareBtn"
        :customShare="false"
        @hideAd="
        () => {
          showAd = !showAd;
        }
      "
        @goNotice="goNoticeList"
    ></tui-scroll-top>

    <!-- 流量主组件 -->
    <!-- #ifdef MP-WEIXIN -->
    <view v-show="showAd">
      <kz-ad
          ref="adIndex"
          kind="BANNER"
          :config="ad"
          field="index_banner"
      ></kz-ad>
      <kz-ad
          ref="adIndex"
          kind="VIDEO"
          :config="ad"
          field="index_video"
      ></kz-ad>
      <kz-ad
          ref="adIndex"
          kind="VIDEO_PATCH"
          :config="ad"
          field="index_video_patch"
      ></kz-ad>
    </view>
    <!-- #endif -->

    <!-- toast提示 -->
    <tui-toast ref="toast"></tui-toast>

    <!-- 登录组件 -->
    <login ref="login"></login>

    <!-- 底部导航栏组件 -->
    <tabbar :theme="tabbarStyle" :tabbar="tabbar"></tabbar>

    <view class="margin-bottom-xl">
      <tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
    </view>
  </view>
</template>

<script>
// import HeadLine from '@/components/headline/headline.vue'
import AddTip from "@/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue";
import subjectApi from "@/common/api/subject.js";

var interstitialAd = null;

export default {
  components: {
    // HeadLine,
    AddTip,
  },
  data() {
    return {
      focusOnTip: "点击「添加小程序」，下次访问更便捷",
      imgUrl: this.imgUrl,
      banners: [],
      system: null,
      ad: null,
      showAd: true,
      showSkeleton: true,
      headlines: [],
      notices: [],
      scrollTop: 0,
      showAdBtn: false,
      showShareBtn: false,
      hideTop: false,
      pageStyle: "color",
      papers: [],
      rooms: [],
      news: [],
      tabbarStyle: "",
      tabbar: [],
      diyIndexButton: [],
      userInfo: {},
      subjectId: 0,
      subjectName: "题库分类",
      title: "答题考试系统",
    };
  },
  onLoad(e) {
    this.getUserSubject();
    this.getSetting();
    let userInfo = uni.getStorageSync("user");
    this.userInfo = userInfo ? userInfo : {};
    uni.$once("login_success", (data) => {
      let userInfo = uni.getStorageSync("user");
      this.userInfo = userInfo ? userInfo : {};
    });
  },
  onShow() {
    this.getUserSubject();

    // 监听科目选择事件
    uni.$on("event_subject_choose", (e) => {
      console.log("event_subject_choose", e);
      let subject_id = e.subject_id;
      if (subject_id != this.subjectId) {
        this.subjectId = subject_id;
        this.getSetting();
      }
    });

    // 监听登录成功事件，关闭登录弹框并执行回调
    uni.$on("login_success", (data) => {
      console.log("监听到登录成功事件", data);
      if (this.$refs.login) {
        // 关闭登录弹框
        this.$refs.login.modal = false;
        
        // 执行登录成功后的回调
        if (this.$refs.login.afterMethod) {
          this.$refs.login.afterMethod();
          this.$refs.login.afterMethod = null;
        }
      }
    });
  },
  onPageScroll(e) {
    if (!this.hideTop) {
      this.scrollTop = e.scrollTop;
    }
  },
  
  onUnload() {
    // 只在页面销毁时移除事件监听器
    uni.$off("login_success");
    uni.$off("event_subject_choose");
  },
  
  onHide() {
    // 页面隐藏时也移除事件监听器
    uni.$off("login_success");
    uni.$off("event_subject_choose");
  },
  methods: {
    // 检查登录状态并处理题库相关操作
    checkLoginAndProceed(action) {
      const token = uni.getStorageSync("token");
      if (!token) {
        // 未登录，弹出登录框
        this.$refs.login.modal = true;
        // 设置登录成功后的回调操作
        this.$refs.login.afterMethod = action;
        return false;
      }
      // 已登录，直接执行操作
      if (typeof action === 'function') {
        action();
      }
      return true;
    },
    
    clickUserInfo() {
      if (!uni.getStorageSync("token")) {
        this.$refs.login.modal = true;
      }
    },
    getUserSubject() {
      let user_subject = uni.getStorageSync("user_subject");
      if (user_subject) {
        // 优先显示三级分类，如果没有三级分类才显示二级分类
        if (user_subject.subject3 && user_subject.subject3.id) {
          this.subjectId = user_subject.subject3.id;
          this.subjectName = user_subject.subject3.name;
        } else if (user_subject.subject2 && user_subject.subject2.id) {
          this.subjectId = user_subject.subject2.id;
          this.subjectName = user_subject.subject2.name;
        } else {
          this.subjectId = 0;
          this.subjectName = "题库分类";
        }
      } else {
        this.subjectId = 0;
        this.subjectName = "题库分类";
      }
    },

    getSetting() {
      this.http("common/index", {subject_id: this.subjectId}, "get").then(
          (res) => {
            if (!res.code) {
              uni.showToast({
                title: "获取数据失败，请刷新重试",
                icon: "error",
              });
              return;
            }

            // 积分提示
            let point = res.data.point;
            if (point?.get_point) {
              this.$refs.toast.show({
                title: "积分+" + point.get_point,
                content: point.type,
                imgUrl: "/static/toast/info-circle.png",
                icon: true,
                duration: 4000,
              });
            }

            // 公告
            this.notices = res.data.notices;
            // this.headlines = res.data.notice
            // 考卷
            this.papers = res.data.papers;
            // 考场
            this.rooms = res.data.rooms;
            // 学习动态
            this.news = res.data.news;

            // 系统配置数据
            let system = res.data.system;
            if (system) {
              this.system = system;
              uni.setStorageSync("system", system);

              // 轮播图
              if (system.banner) {
                let banners = [];
                for (let bannerImage of system.banner.split(",")) {
                  console.log(
                      "bannerImage",
                      bannerImage,
                      bannerImage.indexOf("http")
                  );
                  if (bannerImage.indexOf("http") < 0) {
                    bannerImage = this.imgUrl + bannerImage;
                  }

                  banners.push({
                    image: bannerImage,
                  });
                }
                this.banners = banners;
                console.log("banners", this.banners);

                // 延迟加载：v-if导致组件未完全渲染
                // setTimeout(() => {
                // 	this.banners = system.banner.split(',')
                // 	console.log('banners', this.banners)
                // }, 200)
              }
            }

            // 页面配置数据
            let page = res.data.page;
            if (page) {
              this.page = page;
              uni.setStorageSync("page", page);

              if (page.index_title) {
                this.title = page.index_title;
              }

              // 页面风格
              this.pageStyle = page.page_index_style
                  ? page.page_index_style
                  : "color";
              // this.pageStyle = 'color'
              // 底部栏风格
              this.tabbarStyle = page.page_tabbar_style
                  ? page.page_tabbar_style
                  : "glass";
              // 悬浮按钮
              this.showAdBtn = parseInt(page.page_index_ad_btn) == 1;
              this.showShareBtn = parseInt(page.page_index_share_btn) == 1;
            }

            // #ifdef MP-WEIXIN
            // 流量主数据
            let ad = res.data.ad;
            if (ad) {
              this.ad = ad;
              uni.setStorageSync("ad", ad);

              // 插屏广告
              if (this.ad.index_cp_open == 1) {
                this.adUtils.interstitial.load(this.ad.index_cp);
                this.adUtils.interstitial.show();
              }

              // // 激励广告
              // this.adUtils.rewarded.load('adunit-69d6a49d4c5999c5', () => {
              //       //这里写你的任意奖励事件
              // });
              // this.adUtils.rewarded.show();
            }
            // #endif

            // cdn域名
            if (res.data.cdn_url) {
              uni.setStorageSync("cdn_url", res.data.cdn_url);
            }

            // 自定义tabbar
            if (res.data.tabbar) {
              this.tabbar = res.data.tabbar;
              uni.setStorageSync("tabbar", this.tabbar);
            }

            // 自定义首页
            if (res.data.diy_index_button) {
              this.diyIndexButton = res.data.diy_index_button;
              uni.setStorageSync("diyIndexButton", this.diyIndexButton);
            }

            // 隐藏骨架屏
            this.showSkeleton = false;
            this.$forceUpdate();
          }
      );

      let user_subject = uni.getStorageSync("user_subject");
      // if (user_subject && user_subject.subject2 && user_subject.subject2.id) {
      //   subjectApi
      //       .getSubjectDetail(this, {subject_id: user_subject.subject2.id})
      //       .then((res) => {
      //         console.log("res", res);
      //         if (res && res.code == 1) {
      //           let subject = res.data;
      //           uni.setStorageSync("user_subject", {
      //             subject1: {
      //               id: subject.parent.id,
      //               name: subject.parent.name,
      //             },
      //             subject2: {
      //               id: subject.id,
      //               name: subject.name,
      //             },
      //           });

      //           this.subjectName = subject.name;
      //         } else {
      //           uni.setStorageSync("user_subject", null);
      //           this.subjectName = "请选择";
      //         }
      //       });
      // }
    },

    // 点击悬浮按钮
    clickFabItem(e) {
      console.log("clickFabItem", e);
    },

    // 跳转公告列表
    goNoticeList() {
      this.utils.goto("notice-list");
    },

    // 点击公告，跳转公告详情
    clickNotice(id) {
      this.utils.goto("notice-detail?id=" + id);
    },

    // 点击科目，跳转科目切换
    clickSubjectChang() {
      this.utils.goto("/pagesSubject/index?type=subject");
    },
  },
};
</script>

<style>
page {
  background-color: #fff;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 40upx 0px;
  justify-content: space-between;
}

.nav-li {
  padding: 30upx;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav-li::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-li.cur {
  color: #fff;
  background: rgb(94, 185, 94);
  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}

.nav-title {
  font-size: 32upx;
  font-weight: 300;
}

.nav-title::first-letter {
  font-size: 40upx;
  margin-right: 4upx;
}

.nav-name {
  font-size: 28upx;
  text-transform: Capitalize;
  margin-top: 20upx;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40upx;
  height: 6upx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100upx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40upx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36upx;
  margin-right: 1px;
}

.nav-li text {
  position: absolute;
  right: 30upx;
  top: 30upx;
  font-size: 52upx;
  width: 60upx;
  height: 60upx;
  text-align: center;
  line-height: 60upx;
}

.text-light {
  font-weight: 300;
}

@keyframes show {
  0% {
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(40upx);
  }

  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes show {
  0% {
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(40upx);
  }

  100% {
    transform: translateY(0px);
  }
}

/*banner*/

.tui-banner-box {
  width: 100%;
  padding-top: 20rpx;
  box-sizing: border-box;
  background: #fff;
}

.tui-banner-swiper {
  width: 100%;
  height: 320rpx;
}

.tui-banner-item {
  padding: 0 16rpx;
  box-sizing: border-box;
}

.tui-slide-image {
  width: 100%;
  height: 320rpx;
  display: block;
  border-radius: 12rpx;
  /* transition: all 0.1s linear; */
}

.tui-banner-scale {
  transform: scaleY(0.9);
  transform-origin: center center;
}

/* #ifdef MP-WEIXIN */
.tui-banner-swiper .wx-swiper-dot {
  width: 8rpx;
  height: 8rpx;
  display: inline-flex;
  background: none;
  justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
  content: "";
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
  overflow: hidden;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
  background: #fff;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
  width: 16rpx;
}

/* #endif */
/*banner*/
</style>
